<template>
  <div
    class="main"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="chanleNane">
      <p>房间号：{{ this.$route.query.channel }}</p>
      <img
        class="backout"
        src="../../img/backout.png"
        alt=""
        @click="backout"
      />
    </div>
    <div class="lyric">
      <div class="musicName" v-if="nowMusic.name">
        {{ this.nowMusic.name }}-{{ this.nowMusic.singer }}
      </div>
      <div class="scorll"  @mousedown.prevent="handleMove" v-if="song.length">
        <div class="scorllBox" id="scorllBox" :style="{transform:'translate3d(0,'+ translatey +'px'+',0)'}" >
          <div v-for='(item,i) in song' :key="(i+'s')" class="sentence" :class="i==currentSentence?'biger':'normal'">
            <div v-for='(item1,j) in item.tone' :key="(j+'s')" class="word" :class="item1._begin<=currentTime-0.15?'red':'white'">
              {{item1.word}}
            </div>
          </div>
        </div>
      </div>
      <div class="buttonList" v-if="isSelect==1">
        <div>
          <img
            class="img"
            v-if="play"
            src="../../img/pause.png"
            alt=""
            @click="togglePlay"
          />
          <img
            class="img"
            v-else
            src="../../img/play.png"
            alt=""
            @click="togglePlay"
          />
          <img class="img" src="../../img/next.png" alt="" @click="nextMusic" />
        </div>
        <div>
          <img class="img" src="../../img/vioce.png" alt="" @click="setVioce" />
          <img
            class="img"
            v-if="on"
            src="../../img/on.png"
            alt=""
            @click="toggleOn"
          />
          <img
            class="img"
            v-else
            src="../../img/off.png"
            alt=""
            @click="toggleOn"
          />
        </div>
      </div>
    </div>
    <div class="vioceSet" v-if="vioceSet">
      <div><i class="el-icon-minus" @click="decrease"></i></div>
      <div class="line"><el-progress :percentage="percentage" :color="customColors"></el-progress></div>
      <div><i class="el-icon-plus" @click="increase"></i></div>
    </div>
    <div class="videoBox" id="videoBox" ></div>
    <div class="bottom" v-if="isSelect==1">
      <div>
        <img
          class="img"
          v-if="audioOpen"
          src="../../img/2.png"
          alt=""
          @click="toggleAudio"
        />
        <img
          class="img"
          v-else
          src="../../img/3.png"
          alt=""
          @click="toggleAudio"
        />
        <img
          class="img"
          v-if="videoOpen"
          src="../../img/1.png"
          alt=""
          @click="toggleVideo"
        />
        <img
          class="img"
          v-else
          src="../../img/4.png"
          alt=""
          @click="toggleVideo"
        />
      </div>
      <div>
        <img
          src="../../img/btn.png"
          class="order"
          alt=""
          @click="drawer = true"
        />
      </div>
    </div>
    <div class="musicTable" v-if="drawer">
      <i class="el-icon-close" @click="drawer = false"></i>
      <el-tabs type="border-card">
        <el-tab-pane label="点歌" class="list">
          <div v-for="item in musicList" :key="item.songCode" class="item">
            <div class="left">
              <div>{{ item.name }}</div>
              <div>{{ item.singer }}</div>
            </div>
            <div v-if="!item.select" class="noselect" @click="goOrder(item)">
              点歌
            </div>
            <div v-else class="select">已点</div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已点" class="list">
          <div v-for="item in orderMusic" :key="item.songCode" class="item">
            <div class="left">
              <div>{{ item.name }}</div>
              <div>{{ item.singer }}</div>
            </div>
            <div
              v-if="item.songCode == nowMusic.songCode"
              style="color: #009fff; font-size: 14px"
            >
              演唱中
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import AgoraRTC from "agora-rtc-sdk-ng";
import { stringToUint8Array, Uint8ArrayToString } from "../utils/index.js";
import JSZip from "jszip";
const url = new URL("./worker/worker.js", import.meta.url);
const worker = new Worker(url, { type: "classic" });
export default {
  data() {
    return {
      percentage: 50,
      customColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],
      channel: this.$route.query.channel,
      isSelect: this.$route.query.isSelect,
      drawer: false,
      authorizationField:
        "Basic OTE2NTM2MTM5ZjA5NGQyZDkwYTQ0MGIwNzRlNzllMTc6OThhMWY2ZThjMThiNGY4MThkZjJjZmI5OWRiNDBjNDc=",
      appId: "4135901d9c8b4f0cb09fbb51fd7508ff",
      requestId: "4135901d9c8b4f0cb09fbb51fd7508dd",
      musicList: [
        //   {
        //   songCode:'6246262727281640',
        //   name: "退后",
        //   singer: "周杰伦",
        // },{
        //   songCode:'6246262727281830',
        //   name: "回到过去",
        //   singer: "周杰伦",
        // },{
        //   songCode:'6246262727281850',
        //   name: "龙拳",
        //   singer: "周杰伦",
        // },{
        //   songCode:'6246262727281860',
        //   name: "最长的电影",
        //   singer: "周杰伦",
        // },{
        //   songCode:'6246262727281861',
        //   name: "牛仔很忙",
        //   singer: "周杰伦",
        // },{
        //   songCode:'6246262727283790',
        //   name: "听海",
        //   singer: "张学友",
        // },{
        //   songCode:'6246262727283810',
        //   name: "旧情绵绵",
        //   singer: "张学友",
        // },{
        //   songCode:'6246262727283820',
        //   name: "一千个伤心的理由",
        //   singer: "张学友",
        // },{
        //   songCode:'6246262727283821',
        //   name: "等你等到我心痛",
        //   singer: "张学友",
        // },
        {
          songCode: "6625526603253110",
          name: "告白气球",
          singer: "周杰伦",
        },
        {
          songCode: "6625526603258750",
          name: "凉凉",
          singer: "杨宗纬；张碧晨",
        },
        {
          songCode: "6625526603263460",
          name: "说散就散",
          singer: "JC陈泳彤",
        },
        {
          songCode: "6625526603270070",
          name: "追光者",
          singer: "岑宁儿",
        },
        {
          songCode: "6625526603276270",
          name: "演员",
          singer: "薛之谦",
        },
        {
          songCode: "6625526603282930",
          name: "光年之外",
          singer: "邓紫棋",
        },
        {
          songCode: "6625526603287770",
          name: "纸短情长",
          singer: "烟把儿乐队",
        },
        {
          songCode: "6625526603292550",
          name: "小半",
          singer: "陈粒",
        },
        {
          songCode: "6625526603296890",
          name: "晴天",
          singer: "周杰伦",
        },
        {
          songCode: "6625526603301530",
          name: "成都",
          singer: "赵雷",
        },
        {
          songCode: "6625526603305730",
          name: "起风了",
          singer: "买辣椒也用券",
        },
      ],
      nowMusic: {},
      orderMusic: [],
      play: false, //播放暂停
      on: true, //原声伴唱
      videoOpen: false, //主播麦
      audioOpen: false, //主播视频
      rtc: {
        client: null,
      },
      localTracks: {
        audioTrack: null,
        videoTrack: null,
      },
      token: null,
      uid: null,
      mp3MusicFirstTrack: null, //原声
      mp3MusicSecondTrack: null, //伴奏
      loading: false,
      timer: "",
      changeTrackFlag: false,
      song: [],
      translatey:38,
      currentTime:0,
      currentSentence:-1,
      prePosition:0,
      move:false,//手动拖拽歌词
      previous:null,//控制拖拽歌词速度
      firstJion:false,
      vioceSet:false,
      // currentWord:-1,
    };
  },
  created() {
    this.start();
    this.previous = new Date().getTime();
  },
  mounted() {
    let that = this;
    worker.onmessage = async function (event) {
      const { method, data } = event.data;
      console.log("Received message from worker", event.data);
      if (method == "success") {
        await that.createCustomAudioTrack(data);
        // setShow(true)
        that.loading = false;
      }
    };
    window.addEventListener("beforeunload", (e) => this.beforeunloadHandler(e));
    if(this.isSelect == 1){
      this.sendMessage();
    }
    
  },

  beforeDestroy() {
    this.beforeunloadHandler();
    this.backout();
    window.removeEventListener("beforeunload", (e) =>
      this.beforeunloadHandler(e)
    );
  },
  methods: {
    setVioce(){
      this.vioceSet = !this.vioceSet;
    },
    increase() {
        this.percentage += 10;
        if (this.percentage > 100) {
          this.percentage = 100;
        }
        this.mp3MusicFirstTrack?.setVolume(this.percentage)
        this.mp3MusicSecondTrack?.setVolume(this.percentage)
      },
      decrease() {
        this.percentage -= 10;
        if (this.percentage < 0) {
          this.percentage = 0;
        }
        this.mp3MusicFirstTrack?.setVolume(this.percentage)
        this.mp3MusicSecondTrack?.setVolume(this.percentage)
      },
    lyricChange(){
      this.song.forEach((item,i)=>{
        if(Number(item.tone[item.tone.length-1]._end)>=this.currentTime-0.15&&this.currentTime-0.15>=Number(item.tone[0]._begin)){
          this.currentSentence = i;
          this.translatey = -i*29+38
        }
      })
    },
    extractAudio(playUrl) {
      worker.postMessage({
        method: "extractAudio",
        data: playUrl,
      });
    },
    sendMessage() {
      let that = this;
      this.timer = setInterval(() => {
        if (that.nowMusic.songCode) {
          let time;
          if (that.mp3MusicFirstTrack && that.on) {
            time = that.mp3MusicFirstTrack.getCurrentTime();
          } else if (that.mp3MusicFirstTrack && !that.on) {
            time = that.mp3MusicSecondTrack.getCurrentTime();
          } else {
            time = 0;
          }
          this.currentTime = time;
          // console.log(this.currentTime)
          if(!this.move){
            this.lyricChange()
          }
          that.rtc.client.sendStreamMessage(
            stringToUint8Array(
              JSON.stringify({
                actions:'getTime',
                songCode:this.nowMusic.songCode,
                singer:encodeURIComponent(this.nowMusic.singer),
                name:encodeURIComponent(this.nowMusic.name),
                currentTime:this.currentTime,
              })
            )
          );
        }
      }, 50);
    },
    handlemessage(uid, data) {
      let detail = JSON.parse(Uint8ArrayToString(data));
      if(detail.actions == 'getDetail'){//切歌
        this.getDetail({
          songCode:detail.songCode,
        })
        this.nowMusic.singer = decodeURIComponent(detail.singer);
        this.nowMusic.songCode = detail.songCode;
        this.nowMusic.name = decodeURIComponent(detail.name);
      }else if(detail.actions == 'togglePlay'){//暂停播放
        this.play = detail.data.play
      }else if(detail.actions == 'toggleOn'){//原声伴唱 
        this.on = detail.data.on
      }else if(detail.actions == 'getTime'){//获取currentTime
        this.currentTime = detail.currentTime;
        this.lyricChange()
        if(!this.nowMusic.songCode){
          this.firstJion = true;
          this.getDetail({
            songCode:detail.songCode
          },'getTime')
        }
        this.nowMusic.singer = decodeURIComponent(detail.singer);
        this.nowMusic.songCode = detail.songCode;
        this.nowMusic.name = decodeURIComponent(detail.name);
      }
    },
    async createCustomAudioTrack(arr) {
      const [music1, music2] = arr;
      var audioCtx1 = new AudioContext();
      const firstAudioBuffer = await audioCtx1.decodeAudioData(music1.buffer);
      console.log("firstAudioBuffer", firstAudioBuffer);
      this.mp3MusicFirstTrack = await AgoraRTC.createBufferSourceAudioTrack({
        source: firstAudioBuffer,
        // cacheOnlineFile:true
      });
      var audioCtx2 = new AudioContext();
      const secondAudioBuffer = await audioCtx2.decodeAudioData(music2.buffer);
      console.log("secondAudioBuffer", secondAudioBuffer);
      this.mp3MusicSecondTrack = await AgoraRTC.createBufferSourceAudioTrack({
        source: secondAudioBuffer,
        // cacheOnlineFile:true
      });
      this.mp3MusicFirstTrack.setVolume(this.percentage)
      this.mp3MusicSecondTrack.setVolume(this.percentage)
      this.mp3MusicFirstTrack.on("source-state-change", (currentState) => {
        // console.log(duration)
        console.log('歌曲状态发生变化')
        if (currentState == "stopped") {
          console.log(this.changeTrackFlag)
          if (this.changeTrackFlag) {
            this.changeTrackFlag = false;
          } else {
            this.nextMusic();
          }
        }
      });
      this.mp3MusicSecondTrack.on("source-state-change", (currentState) => {
        // console.log(currentState)
        if (currentState == "stopped") {
          if (this.changeTrackFlag) {
            this.changeTrackFlag = false;
          } else {
            this.nextMusic();
          }
        }
      });
      if (this.on) {
        this.mp3MusicFirstTrack.play();
        this.mp3MusicFirstTrack.startProcessAudioBuffer();
        await this.rtc.client.publish(this.mp3MusicFirstTrack);
      } else {
        this.mp3MusicSecondTrack.play();
        this.mp3MusicSecondTrack.startProcessAudioBuffer();
        await this.rtc.client.publish(this.mp3MusicSecondTrack);
      }
    },
    async start() {
      this.rtc.client = AgoraRTC.createClient({
        mode: "live",
        codec: "vp8",
        role: this.isSelect == 1 ? "host" : "audience",
      });
      await this.rtc.client.on("user-published", async (user, mediaType) => {
        await this.rtc.client.subscribe(user, mediaType);
        const uid = user.uid;
        if (mediaType === "audio") {
          const remoteAudioTrack = user.audioTrack;
          remoteAudioTrack.play();
        }
        if (mediaType === "video") {
          this.videoOpen = true;
          const remoteVideoTrack = user.videoTrack;
          const remotePlayerContainer = document.createElement("div");
          remotePlayerContainer.id = 'videoBox2';
          // remotePlayerContainer.textContent = "Remote user " + user.uid.toString();
          remotePlayerContainer.style.width = "375px";
          remotePlayerContainer.style.height = "300px";
          document.getElementById("videoBox").append(remotePlayerContainer);
          remoteVideoTrack.play(remotePlayerContainer,{ fit: "contain",});
        }
      });
      await this.rtc.client.on("user-unpublished", async (user,mediaType) => {
        await this.rtc.client.unsubscribe(user,mediaType);
        if (mediaType === "video") {
          const remotePlayerContainer = document.getElementById('videoBox2');
          remotePlayerContainer.remove();
        }
      });
      await this.rtc.client.on("user-joined", async (user) => {
        if(this.isSelect ==1){
          this.$message({
            message: "一个房间只能有一个主播",
            type: "warning",
          });
        }
      });
      await this.rtc.client.on("user-left", (user, reason) => {
        //主播离开了
        this.$message({
          message: "主播已离开",
          type: "warning",
        });
        this.backout()
      });
      await this.rtc.client.on("stream-message", this.handlemessage);
      const uid = await this.rtc.client.join(
        this.appId,
        this.channel,
        this.token,
        this.uid
      );
      //主播才能音视频
      if (this.isSelect == 1) {
        this.localTracks.audioTrack =
          await AgoraRTC.createMicrophoneAudioTrack();
        // this.localTracks.videoTrack = await AgoraRTC.createCameraVideoTrack();
      }
    },
    //上麦
    async toggleAudio() {
      if (this.audioOpen) {
        await this.rtc.client.unpublish(this.localTracks.audioTrack);
        this.audioOpen = false;
      } else {
        await this.rtc.client.publish(this.localTracks.audioTrack);
        this.audioOpen = true;
      }
    },
    //开视频
    async toggleVideo() {
     
      
      if (this.videoOpen) {
        await this.rtc.client.unpublish(this.localTracks.videoTrack);
        this.localTracks.videoTrack.stop();
        this.localTracks.videoTrack.close();
        this.localTracks.videoTrack = '';
        const remotePlayerContainer = document.getElementById('videoBox2');
        remotePlayerContainer.remove();
        this.videoOpen = false;
      } else {
        this.localTracks.videoTrack = await AgoraRTC.createCameraVideoTrack();
        await this.rtc.client.publish(this.localTracks.videoTrack);
        const remoteVideoTrack = this.localTracks.videoTrack;
        const remotePlayerContainer = document.createElement("div");
        remotePlayerContainer.id = 'videoBox2';
        // remotePlayerContainer.textContent = "Remote user " + user.uid.toString();
        remotePlayerContainer.style.width = "375px";
        remotePlayerContainer.style.height = "281px";
        document.getElementById("videoBox").append(remotePlayerContainer);
        remoteVideoTrack.play(remotePlayerContainer,{ fit: "contain",});
        this.videoOpen = true;
      }
    },
    async getDetail(item,action) {
      if(!this.firstJion && this.isSelect == 2&&action == 'getTime') return
      this.loading = true;
      axios
        .get(
          `https://api.agora.io/cn/v1.0/projects/${this.appId}/ktv-service/api/serv/song-url?requestId=${this.requestId}&songCode=${item.songCode}&lyricType=0`,
          { headers: { Authorization: this.authorizationField } }
        )
        .then(async (res) => {
          if (res.status == 200) {
            this.nowMusic.playUrl = res.data.data.playUrl.replace(
              "https://accktv.sd-rtn.com",
              "/api_audiotext"
            );
            this.nowMusic.lyric = res.data.data.lyric.replace(
              "https://accktv.sd-rtn.com",
              "/api_audiotext"
            );
            if (this.mp3MusicFirstTrack) {
              this.mp3MusicFirstTrack.stop();
              this.mp3MusicFirstTrack.stopProcessAudioBuffer();
              await this.rtc.client.unpublish(this.mp3MusicFirstTrack);
              this.mp3MusicSecondTrack.stop();
              this.mp3MusicSecondTrack.stopProcessAudioBuffer();
              await this.rtc.client.unpublish(this.mp3MusicSecondTrack);
            }
            this.currentTime = 0;
            this.currentSentence = -1;
            this.translatey = 38;
            if(this.isSelect==1){
              this.rtc.client.sendStreamMessage(
                stringToUint8Array(
                  JSON.stringify({
                    actions:"getDetail",
                    songCode:this.nowMusic.songCode,
                    singer:encodeURIComponent(this.nowMusic.singer),
                    name:encodeURIComponent(this.nowMusic.name),
                  })
                )
              );
              this.extractAudio(this.nowMusic.playUrl);
            }else{
              this.loading = false;
            }
            this.firstJion = false;
            this.handleLyc(this.nowMusic.lyric)
            this.play = true;
          } else {
            this.$message.error("网络异常,请重试");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("网络异常,请重试");
        });
    },
    async goOrder(item) {
      //当前没有歌曲播放
      if (!this.nowMusic.songCode) {
        this.nowMusic = item;
        await this.getDetail(item);
      }
      this.orderMusic.push(item);
      this.musicList.forEach((i) => {
        if (i.songCode == item.songCode) {
          i.select = true;
        }
      });
    },
    //退出房间
    async backout() {
      this.changeTrackFlag = true;
      for (let trackName in this.localTracks) {
        var track = this.localTracks[trackName];
        if (track) {
          track.stop();
          track.close();
          this.localTracks[trackName] = null;
        }
      }
      if (this.mp3MusicFirstTrack) {
        this.mp3MusicFirstTrack.stopProcessAudioBuffer();
      }
      if (this.mp3MusicSecondTrack) {
        this.mp3MusicSecondTrack.stopProcessAudioBuffer();
      }
      await this.rtc.client.leave();
      this.beforeunloadHandler();
      this.$router.back();
    },
    beforeunloadHandler(e) {
      window.clearInterval(this.timer);
      window.sessionStorage.removeItem("token");
      var confirmationMessage = "你确定要离开我吗？";
      (e || window.event).returnValue = confirmationMessage; // 兼容 Gecko + IE
      return confirmationMessage; // 兼容 Gecko + Webkit, Safari, Chrome
    },
    //暂停
    togglePlay() {
      if (this.mp3MusicFirstTrack) {
        if (this.play) {
          if (this.on) {
            this.mp3MusicFirstTrack.pauseProcessAudioBuffer();
          } else {
            this.mp3MusicSecondTrack.pauseProcessAudioBuffer();
          }
          this.play = false;
          this.rtc.client.sendStreamMessage(
            stringToUint8Array(
              JSON.stringify({
                actions:"togglePlay",
                data:{
                  play:false
                }
              })
            )
          );
        } else {
          if (this.on) {
            this.mp3MusicFirstTrack.resumeProcessAudioBuffer();
          } else {
            this.mp3MusicSecondTrack.resumeProcessAudioBuffer();
          }
          this.play = true;
          this.rtc.client.sendStreamMessage(
            stringToUint8Array(
              JSON.stringify({
                actions:"togglePlay",
                data:{
                  play:true
                }
              })
            )
          );
        }
      } else {
        this.$message({
          message: "没有点歌",
          type: "warning",
        });
      }
    },
    //原声伴唱
    async toggleOn() {
      this.changeTrackFlag = true;
      this.play = true;
      if (this.on) {
        if (this.mp3MusicFirstTrack) {
          this.mp3MusicFirstTrack.stop();
          let time = this.mp3MusicFirstTrack.getCurrentTime();
          this.mp3MusicFirstTrack.stopProcessAudioBuffer();
          await this.rtc.client.unpublish(this.mp3MusicFirstTrack);
          this.mp3MusicSecondTrack.play();
          this.mp3MusicSecondTrack.startProcessAudioBuffer();
          // this.mp3MusicSecondTrack.startProcessAudioBuffer({startPlayTime:time})
          this.mp3MusicSecondTrack.seekAudioBuffer(time);
          await this.rtc.client.publish(this.mp3MusicSecondTrack);
        }
        this.on = false;
        this.rtc.client.sendStreamMessage(
          stringToUint8Array(
            JSON.stringify({
              actions:"toggleOn",
              data:{
                on:false
              }
            })
          )
        );
      } else {
        if (this.mp3MusicFirstTrack) {
          this.mp3MusicSecondTrack.stop();
          let time = this.mp3MusicSecondTrack.getCurrentTime();
          this.mp3MusicSecondTrack.stopProcessAudioBuffer();
          await this.rtc.client.unpublish(this.mp3MusicSecondTrack);
          this.mp3MusicFirstTrack.play();
          this.mp3MusicFirstTrack.startProcessAudioBuffer();
          // this.mp3MusicFirstTrack.startProcessAudioBuffer({startPlayTime:time})
          this.mp3MusicFirstTrack.seekAudioBuffer(time);
          await this.rtc.client.publish(this.mp3MusicFirstTrack);
        }
        this.on = true;
        this.rtc.client.sendStreamMessage(
          stringToUint8Array(
            JSON.stringify({
              actions:"toggleOn",
              data:{
                on:true
              }
            })
          )
        );
      }
    },
    //下一首
    nextMusic() {
      console.log("切歌");
      this.changeTrackFlag = true;
      let index = this.orderMusic.indexOf(this.nowMusic);
      let length = this.orderMusic.length;
      if (index < 0) {
        this.$message({
          message: "没有点歌",
          type: "warning",
        });
      } else if (index + 1 >= length) {
        this.nowMusic = this.orderMusic[0];
        this.getDetail(this.orderMusic[0]);
      } else if (index + 1 < length) {
        this.nowMusic = this.orderMusic[index + 1];
        this.getDetail(this.orderMusic[index + 1]);
      }
    },
    handleLyc(url){
      axios({
          method: "get",
          url: url, 
          responseType: "arraybuffer",
      })
        .then((response) => {
            if (response.status === 200 || response.status===0){
                return response.data;
            }
        })
        .then(JSZip.loadAsync)
        .then((zip) => {
            const keys = Object.keys(zip.files);
            for (let key of keys) {
                zip.file(key)
                    .async("string")
                    .then((text) => {
                      const xml = this.$x2js.xml2js(text)  //解析
                      this.song = xml.song.midi_lrc.paragraph.sentence;
                    });
            }   
        });
    },
    handleMove(event){
      if(this.isSelect == 2) return
      this.prePosition =  (event.pageY || event.clientY);
      this.move = true;
      clearInterval(this.timer)
      document.onmousemove = (e)=>{
        let previous = JSON.parse(JSON.stringify(this.previous));//throttle 500ms updateSelfPosition
        let date = new Date().getTime();
        if(date - previous>=100){
          var y = (e.pageY || e.clientY);
          let x = Math.floor((y-this.prePosition)/50);
          if(this.currentSentence-x<=0){
            this.currentSentence = 0
          }else if(this.currentSentence-x>=this.song.length-1){
            this.currentSentence = this.song.length-1
          }else{
            this.currentSentence = this.currentSentence-x
          }
          this.translatey = -this.currentSentence*29+38
          console.log(this.currentSentence)
          this.prePosition = y;
          this.currentTime = this.song[this.currentSentence].tone[0]._begin-0.1;
          this.previous = date
          this.rtc.client.sendStreamMessage(
            stringToUint8Array(
              JSON.stringify({
                actions:'getTime',
                songCode:this.nowMusic.songCode,
                singer:encodeURIComponent(this.nowMusic.singer),
                name:encodeURIComponent(this.nowMusic.name),
                currentTime:this.currentTime,
              })
            )
          );
        }
      }
      document.onmouseup = (e) => { 
        if (this.on) {
          this.mp3MusicFirstTrack.seekAudioBuffer(this.currentTime);
        }else{
          this.mp3MusicSecondTrack.seekAudioBuffer(this.currentTime);
        }
        this.move = false;
        this.$nextTick(()=>{this.sendMessage()})
        document.onmousemove = null;
        document.onmouseup = null;
      }
    },
  },
};
</script>
<style lang="scss">
.main {
  width: 375px;
  height: 667px;
  overflow: auto;
  overflow-x: hidden;
  user-select:none;
  -webkit-touch-callout:none;
  ::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  margin: 0 auto;
  box-shadow: 14px 2px 10px 0px;
  background: url("../../img/back.png") 0 0 no-repeat;
  background-size: 100% 100%;
  padding: 20px 20px 50px;
  position: relative;
  .img {
    width: 24px;
    height: 24px;
    margin: 10px;
  }
  .chanleNane {
    font-weight: 500;
    color: #ffffff;
    line-height: 22px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
  }
  .backout {
    width: 20px;
    height: 20px;
  }
  .lyric {
    width: 375px;
    height: 240px;
    background: url("../../img/b.png") 0 0 no-repeat;
    background-size: 100% 100%;
    position: relative;
    .musicName {
      color: #ffffff;
      line-height: 22px;
      display: inline-block;
      padding: 5px 10px;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 12px;
      text-align: center;
      margin: 5px 20px;
    }
    .buttonList {
      position: absolute;
      bottom: 0;
      left: 10px;
      right: 10px;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-between;
    }
    .scorll{
      text-align: center;
      height: 170px;
      overflow: hidden;
      color: #fff;
      .scorllBox{
        transition: all .3s;
      }
      .sentence{
        margin: 10px 0;
        .word{
          display: inline-block;
        }
      }
    }
  }
  .bottom {
    position: absolute;
    bottom: 20px;
    left: 10px;
    right: 10px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    .order {
      margin-right: 10px;
      height: 28px;
    }
  }
  .musicTable {
    position: absolute;
    bottom: 0px;
    left: 1px;
    right: 0;
    height: 500px;
    background: #232d61;
    border-radius: 20px 20px 0px 0px;
    color: #fff;
    text-align: right;
    .el-icon-close {
      margin: 20px 20px 0 0;
      font-size: 24px;
    }
    .list {
      text-align: left;
      max-height: 360px;
      overflow-y: auto;
      .item {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        padding: 0 10px;
        text-align: center;
        .left {
          display: flex;
          flex-flow: column nowrap;
          align-items: flex-start;
          justify-content: space-around;
          :nth-child(1) {
            font-weight: 500;
            color: #ffffff;
            font-size: 15px;
            line-height: 21px;
          }
          :nth-child(2) {
            color: #6c7192;
            font-size: 12px;
            line-height: 17px;
          }
        }
      }
      .noselect {
        width: 56px;
        height: 28px;
        background: linear-gradient(180deg, #0b8af2 0%, #2753ff 100%);
        border-radius: 24px;
        font-size: 12px;
        line-height: 28px;
        color: #ffffff;
      }
      .select {
        width: 56px;
        height: 28px;
        background-color: rgba(229, 229, 239, 0.1);
        border-radius: 24px;
        font-size: 12px;
        line-height: 28px;
        color: #ffffff;
      }
    }
  }
  .white{
    color: #ffffff;
  }
  .red{
    color:#fce25f
  }
  .biger{
    font-size: 20px;
  }
  .normal{
    font-size: 14px;
  }
  .el-tabs--border-card,
  .el-tabs__header,
  .el-tabs__item {
    background: #232d61 !important;
    border: 1px solid #232d61 !important;
  }
  .el-tabs--border-card {
    box-shadow: 0 0 0 0;
  }
  .vioceSet{
    color: #fff;
    height: 40px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    i{
      width: 10%;
    }
    .line{
      width: 80%;
    }
  }
}
</style>